<template>
	<view class="content">
		<view class="followList" v-if="followList&&followList.length>0">
			<view class="listItem" v-for="(item,index) in followList" :key="item.customerId">

				<view class="avatar">
					<image :src="item.customer.avatar" mode=""></image>
				</view>
				<view class="rightBox">
					<view class="userName">
						{{item.customer.nickName}}
					</view>

					<view :class="['status',item.followStatus == 0?'goFollow':'']"
						@click="changeFollowStatus(item,index)">
						{{ item.followStatus == 1 ? '已关注':'关注' }}
					</view>
				</view>
			</view>
		</view>
		<view class="nullData" v-else>
			<image src="../../static/follow/follow1.png" mode="widthFix"></image>
			<view class="txt">
				您还没有关注过别人哦~
			</view>
		</view>
		<u-overlay :show="modalShow" @click="modalShow = false">
			<view class="warp">
				<!-- <view class="rect" @tap.stop></view> -->
				<view class="followConfirm">
					<view class="txt">
						确定不再关注Ta了吗
					</view>
					<view class="btnGroup">
						<view class="btn cancel" @click="modalShow = false">
							继续关注
						</view>
						<view class="btn confirm" @click="onCancelFollow">
							不关注
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	// import { getCurrentInstance } from 'vue';
	import {
		mapState,
		mapMutations
	} from "vuex";
	import {
		getFallowsNumber,
		getFansNumber,
		addCustomerFans,
		deleteFavorite
	} from "@/api/follow.js";
	export default {
		data() {
			return {
				followList: [],
				listCount: '',
				modalShow: false,
				nowFollowId: '',
				nowFollowIndex: '',
				nowIsLogoff: ''
			};
		},
		computed: {
			...mapState("userInfo", ["Info", 'storeId']),
		},
		methods: {
			changeFollowStatus(item, index) {
				console.log(item.followStatus, 'status')
				if (item.followStatus == 1) {
					this.modalShow = true
					this.nowFollowId = item.customerId
					this.nowFollowIndex = index
					this.nowIsLogoff = item.isLogoff
					// console.log(this.nowIsLogoff,'this.nowIsLogoff')
				} else {
					// 关注
					this.addFollow(item.customerId, index)
				}
			},
			onCancelFollow() {
				console.log(this.nowFollowId, 'this.nowFollowId')
				// return
				deleteFavorite({
					followerId: this.nowFollowId
				}).then((res) => {
					console.log(res);
					if (res.success) {
						console.log(res);
						// 如果用户已注销，直接刷新列表踢出去，否则手动修改关注状态，方便直接再次关注
						if (this.nowIsLogoff == 1) {
							this.getFollowList()
						} else {
							this.followList[this.nowFollowIndex].followStatus = 0
						}
						this.modalShow = false
						uni.showToast({
							title: '取消关注成功',
							icon: 'success',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					} else {
						uni.showToast({
							title: '取消关注失败',
							icon: 'none',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					}
				});
			},
			addFollow(id) {
				addCustomerFans({
					followerId: id
				}).then((res) => {
					console.log(res);
					if (res.success) {
						console.log(res);
						this.followList[this.nowFollowIndex].followStatus = 1
						uni.showToast({
							title: '关注成功',
							icon: 'success',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					} else {
						uni.showToast({
							title: '关注失败',
							icon: 'none',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					}
				});
			},
			getFollowList() {
				getFallowsNumber({
					customerId: this.Info.id
				}).then((res) => {
					console.log(res);
					if (res.success) {
						console.log(res);
						// this.followList = res.result.fallowsList
						res.result.map(item => {
							item.followStatus = 1
						})
						this.followList = res.result
						// this.listCount = res.result.fallowsCount
						// uni.showToast({
						// 	title: '申请成功',
						// 	icon: 'success',
						// 	duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
						// 	mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
						// 	// image:'./image.png',//自定义图标的本地路径
						// });
					} else {
						// uni.showToast({
						// 	title: '申请失败',
						// 	icon: 'none',
						// 	duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
						// 	mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
						// 	// image:'./image.png',//自定义图标的本地路径
						// });
					}
				});
			}
		},
		mounted() {
			// this.getFollowList()
		},
		onShow() {
			this.getFollowList()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		// height: 100vh;
		// background-color: #FDE9BF; 
		// padding: 25rpx;
		padding-bottom: 30rpx;

		.followList {
			padding: 30rpx;

			.listItem {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 35rpx;
				// margin-bottom: 20rpx;
				height: 150rpx;

				.avatar {
					width: 85rpx;
					height: 85rpx;
					margin-right: 20rpx;
					overflow: hidden;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
						display: flex;
					}
				}

				.rightBox {
					width: calc(100% - 105rpx);
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #D9D9D9;

					.userName {
						font-size: 32rpx;
					}


					.status {
						font-size: 32rpx;
						padding: 9rpx 35rpx;
						border-radius: 30rpx;
						background-color: #F4F4F4;
						color: #8C8EA0;
						font-size: 28rpx;
					}

					.goFollow {
						background-color: #FE2C55;
						color: #fff;
					}
				}
			}
		}

		.nullData {
			width: 100%;
			margin-top: 300rpx;

			image {
				width: 35%;
				margin: 0 auto;
				display: block;
			}

			.txt {
				text-align: center;
				color: #8C8EA0;
				font-size: 30rpx;
				margin-top: 20rpx;
			}
		}

		.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;

			.followConfirm {
				width: 70%;
				// height: 250rpx;
				padding: 45rpx 45rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx;

				.txt {
					text-align: center;
					margin-bottom: 45rpx;
				}

				.btnGroup {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;

					.btn {
						padding: 18rpx 0rpx;
						border-radius: 35rpx;
						border: 0;
						font-size: 26rpx;
						width: 46%;
						text-align: center;
					}

					.cancel {
						background-color: #EDEDED;
						color: #4D4D4D;
					}

					.confirm {
						background-image: linear-gradient(to right, #FF4C6E, #FE2C55);
						color: #fff;
					}
				}
			}
		}
	}
</style>